<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/11/14
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="font/iconfont.css">
    <script language="JavaScript" type="text/javascript">
        // 快捷键响应
        // targetObj: 目标对象，如果满足快捷键条件，触发目标对象的click事件
        // ctrlKey: 是否按住了Ctrl组合键
        // shiftKey: 是否按住了Shift组合键
        // altKey: 是否按住了Alt组合键
        // keycode: 按键对应的数值
        function Hotkey(event, targetObj, ctrlKey,shiftKey, altKey, keycode){
            if (
                targetObj
                && event.keyCode == keycode
            )
                targetObj.click();
        }

        function fnKeyup(event)
        {
            var b = document.getElementById("doSearch");
            Hotkey(event, b, false, false, false, 13);
        }

        // 捕获系统的Keyup事件
        // 如果是Mozilla系列浏览器
        if (document.addEventListener)
            document.addEventListener("keyup",fnKeyup,true);
        else
            document.attachEvent("onkeyup",fnKeyup);

        //-->
    </script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        }
        #inform{
            position: absolute;
            top: 20px;
            width: 350px;
            max-height: 250px;           /* 设置最大高度，当高度达到此值时出现滚动条 */
            z-index: 10;
            background-color: #E0E5E5;
            overflow: auto;              /* 自动添加滚动条 */
            box-shadow:10px 0px 20px #000;   /* 外阴影 */
            display: none;   /* 默认隐藏 */
        }
        .bgColor{
            position: absolute;
            left:0;
            top:0;
            width:40px;
            height: 40px;
            background-color: lightblue;
        }
        .txt{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }
        .slider{
            position: absolute;
            left:0;
            top:0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }
        .slider>i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .slider.active>i{
            color:green;
        }
        .okmsg{
            color:green;
        }
        .errormsg{
            color:red;
        }
        .okmsg{
            color:green;
        }
    </style>

    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=1.4.2"/>

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta charset="utf-8">
    <title></title>

</head>

<body>


<%--</div>--%>
<div id="Header">

    <div id="Logo">
        <div id="LogoContent">

            <a href="#"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">

            <a href="viewCart"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
            <img align="middle" src="images/separator.gif" />
                <c:if test="${sessionScope.account == null}">

                    <a href="toSignInServlet">Sign In</a>
                </c:if>

            <c:if test="${sessionScope.account != null}">

                    <a href="signOut">Sign Out</a>
                        <img align="middle" src="images/separator.gif" />

                    <a href="editAccount?username=${sessionScope.account.username}">My Account</a>

             </c:if> <img align="middle" src="images/separator.gif" /> <a
                href="help">?</a></div>
    </div>
    <script>
        $(function () {
            $('#InputTable').keyup(function () {
                var content = this.value;
                if (content == ""){
                    $('#context1').css("display","none");
                    return;
                }
                var time = new Date().getTime();
                $.ajax({
                    type : "GET",
                    url : "searchAjax?keyword="+content,
                    //data : {name:content,time:time},
                    success : function (data) {
                        var res = data.split(",");
                        var html = "";
                        for (var i = 0;i<res.length;i++){
                            html+="<div onclick='setSearch_onclick(this)' onmouseout='changeBackColor_out(this)' onmouseover='changeBackColor_over(this)'>"+res[i]+"</div>";
                        }
                        $('#context1').html(html);
                        $("#context1").css("display","block");
                    }
                });
            });
        });
        function changeBackColor_over(div) {
            $(div).css("background-color","#CCCCCC");
        }
        function changeBackColor_out(div) {
            $(div).css("background-color","");
        }
        function setSearch_onclick(div) {
            $("#InputTable").val(div.innerText);
            $("#context1").css("display","none");
        }
    </script>

    <div id="Search">
        <div id="SearchContent">
            <form action="search" class="search-wrap">
                <p><input class="input-sub" type="submit" name="search" value="Search" />
                    <input id="InputTable" type="text" name="keyword" size="14" class="search"/></p>
            </form>
            <div id="context1" style="background-color:white; border: 1px solid red;width:165px;position: absolute;top: 50px;left:1155px;display:none" >
            </div>
        </div>
    </div>

    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH"><img src="images/sm_fish.gif" /></a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS"><img src="images/sm_dogs.gif" /></a>
        <img src="images/separator.gif" />

        <a href="viewCategory?categoryId=REPTILES"><img src="images/sm_reptiles.gif" /></a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=CATS"><img src="images/sm_cats.gif" /></a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS"><img src="images/sm_birds.gif" /></a>
    </div>

</div>

<div id="Content">
    <td colspan="2" align="right">
        <%
            String msg = (String)request.getAttribute("loginMsg");
            if(msg!=null)
            {
                out.println("<font color='red'>"+msg+"</font>");
            }
        %>
    </td>
